<template>
	<view class="all-main">
		<view class="main">
			<view class="top">
				<view class="icons">
					赠  送
				</view>
			</view>
			<view class="con">
				<view class="items" @click="pickerShow = true">
					<view class="title">
						代理
					</view>
					<view class="vals selects">
						<view class="rights">
							<u-icon name="arrow-right" size="20"></u-icon>
						</view>
						<text>{{sales}}</text>
					</view>
				</view>
				<u-line></u-line>
				<view class="items">
					<view class="title">
						赠送
					</view>
					<view class="vals">
						<u--input border="bottom" inputAlign="right" type="number" fontSize="15px"
							v-model="money" :placeholder="availableBalace"></u--input>
					</view>
				</view>
			</view>
			<view class="btn" @click="verifys">
				确 定
			</view>
			<u-popup :show="show" mode="center" @close="closeTC" @open="openTC">
				<view class="tc">
					<view class="inputs">
						<u--input placeholder="请输入支付密码" border="surround" inputAlign="center" type="password"
							fontSize="15px" maxlength="6" v-model="payPass"></u--input>
					</view>
					<view class="verifys" @click="pay_verifys">
						确 认
					</view>
				</view>
			</u-popup>
			<u-picker :show="pickerShow" :columns="saleData" keyName="name" closeOnClickOverlay
				@close="pickerShow = false" @cancel="pickerShow = false" @confirm="confirm" @change=""></u-picker>
				<u-modal :show="modelShow" showCancelButton confirmText="去设置" @cancel="modelShow = false"
					@confirm="modelConfirm" content='您还没有设置支付密码,是否去设置？'></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				pickerShow: false,
				modelShow: false,
				money: '',
				balace: 1000,
				payPass: '',
				sales: '',
				saleId: '',
				saleData: [],
				availableBalace: '',
				userinfo: {},
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo');
			this.getBalace()
			this.getMyTeamList()
			this.checkPayPass()
		},
		onShow() {
			this.checkPayPass()
		},
		methods: {
			// 获取余额
			async getBalace() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'balance/getTotal',
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1) {
					this.balace = res.data
					this.availableBalace = '可用余额（' + res.data + '）'
				}
			},
			// 获取我的团队
			async getMyTeamList() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Team/getMyTeamList',
					data: {
						type: 2
					},
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1) {
					this.saleData = [res.data]
				}
			},
			// 检测是否设置支付密码
			async checkPayPass() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Secret/check_pay_pass',
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1 && res.data == 0) {
					this.modelShow = true
				}
			},
			verifys() {
				if (this.saleId <= 0) {
					uni.showToast({
						title: '请选择代理',
						icon: "none"
					});
					return false
				}
				if (this.money <= 0) {
					uni.showToast({
						title: '请输入借出的金额',
						icon: "none"
					});
					return false
				}
				if (this.balace*100 < this.money*100) {
					uni.showToast({
						title: '余额不足',
						icon: "none"
					});
					return false
				}
				this.show = true
			},
			closeTC() {
				this.payPass = ''
				this.show = false
			},
			openTC() {
				// this.show = false
			},
			async pay_verifys() {
				if (this.payPass == '') {
					uni.showToast({
						title: '请输入支付密码',
						icon: "none"
					});
					return false
				}
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Secret/pass_confirm_pass',
					data: {
						password: this.payPass
					},
					header: {
						'token': this.userinfo.token
					}
				});
				this.payPass = ''
				this.show = false
				if (res.code == 1) {
					this.borrow()
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				}
			},
			async borrow() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Borrmoney/borrow',
					data: {
						childID: this.saleId,
						typ: 'Z',
						money: this.money
					},
					header: {
						'token': this.userinfo.token
					}
				});
				uni.showToast({
					title: res.msg,
					icon: "none"
				});
				if (res.code == 1) {
					setTimeout(function() {
						uni.navigateBack({
							delta: 1 // 返回的页面数，如果为1表示返回上一页
						});
					}, 2000)
				}
			},
			confirm(e) {
				this.sales = e.value[0].name
				this.saleId = e.value[0].id
				this.pickerShow = false
			},
			modelConfirm() {
				this.modelShow = false
				uni.navigateTo({
					url: '/pages/version5/mine/setup/ChangePassword/setPayPassword'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.main {
		.top {
			padding-top: 50rpx;

			.icons {
				margin: 0 auto;
				width: 200rpx;
				height: 200rpx;
				background-color: #ff9900;
				color: #ffffff;
				font-size: 44rpx;
				text-align: center;
				line-height: 200rpx;
				border-radius: 20rpx;
			}
		}

		.con {
			padding: 50rpx 20rpx 0 20rpx;

			.items {
				padding: 20rpx;
				background-color: #ffffff;
				display: flex;
				justify-content: space-between;
				line-height: 80rpx;

				.title {
					font-weight: bold;
				}

				.selects {
					text {
						float: right;
						margin-right: 10rpx;
					}

					.rights {
						float: right;
						padding-top: 24rpx;
					}
				}
			}
		}

		.btn {
			margin: 60rpx 20rpx 0 20rpx;
			padding: 30rpx 20rpx;
			text-align: center;
			background-color: #ff9900;
			color: #ffffff;
			font-size: 40rpx;
			font-weight: bold;
			border-radius: 10rpx;
		}

		.tc {
			background-color: #ffffff;
			padding: 60rpx;
			border-radius: 20rpx;

			.verifys {
				margin-top: 40rpx;
				width: 100%;
				background-color: #ff9900;
				border-radius: 10rpx;
				color: #ffffff;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				padding: 30rpx 0;
			}
		}
	}
</style>